import React,{useState} from 'react'
import {nanoid} from 'nanoid'
import './App.css'
import Footer from './components/Footer/Footer'
import Header from './components/Header/Header'
import Main from './components/Main/Main'
const App = () => {
    // 状态数据定义
    let [todos, setTodos] = useState([
        {id:nanoid(),title:'吃饭', isDone:false},
        {id:nanoid(),title:'睡觉', isDone:false},
        {id:nanoid(),title:'打豆豆', isDone:false}
    ])
    // 1. 定义方法
    const addTodo = (title)=>{
        let todo = {
            id:nanoid(),
            title,
            isDone:false
        }
        setTodos([todo,...todos])
    }

    const deleteTodo = (id)=>{
        if(!window.confirm('确定删除么?')) return;
        setTodos(todos.filter(todo=>todo.id!==id))
    }

    const checkOne = (todo)=>{
        todo.isDone = !todo.isDone
        setTodos([...todos])
    }
    return (
        <div className="todo-container">
            <div className="todo-wrap">
                <Header addTodo={addTodo}/>
                <Main todos={todos} deleteTodo={deleteTodo} checkOne={checkOne}/>
                <Footer todos={todos}/>
            </div>
        </div>
    )
}
export default App;
